<template>
	<view class="NewAddress">
		<!-- 顶部栏 -->
		<topbar>
			<template v-slot:left>
				<u-icon name="arrow-left" color="#0c34ba" size="28"></u-icon>
				<view>返回</view>
			</template>
			<template v-slot:middle>
				<view class="orderSum">新增地址</view>
			</template>
		</topbar>
		<!-- 表单 -->
		<view class="add-new-address">
			<view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名" prop="name" label-width="150rpx">
						<u-input v-model="form.name" type="text" placeholder="收货人姓名"/>
					</u-form-item>
					<u-form-item label="电话" prop="tel"label-width="150rpx">
						<u-input v-model="form.tel" type="text" placeholder="收货人手机号"/>
					</u-form-item>
					<u-form-item label="地区" prop="region" label-width="150rpx">
						<uni-data-picker placeholder="选择省/市/区"
																 popup-title="请选择城市" 
																 collection="opendb-city-china" 
																 field="code as value, name as text" 
																 orderby="value asc" 
																 :step-searh="true" 
																 self-field="code" 
																 parent-field="parent_code"
						@change="onchange" class="changeRegion">
						   </uni-data-picker>
					</u-form-item>
					<u-form-item label="详细地址" prop="addressDetail" label-width="150rpx">
						<u-input v-model="form.addressDetail" type="text" placeholder="街道门牌,楼层房间号等信息"/>
					</u-form-item>
					<u-form-item label="邮政编码" prop="postalCode" label-width="150rpx">
						<u-input v-model="form.postalCode" type="text" placeholder="邮政编码"/>
					</u-form-item>
					<view class="address-default">
						<view class="">设为默认收货地址</view>
						<u-switch v-model="checkDefaul" active-color="#0C34BA"></u-switch>
					</view>
				</u-form>
			</view>
			<u-button hover-class="none" shape="circle" :custom-style="commitMall"  @click="updateAddress">保存地址</u-button>
		</view>
	</view>
</template>

<script>
	import {postNewAddress} from "network/address.js"
	
	import Topbar from "components/common/topBar/Topbar.vue"
	
	export default{
		components:{
			Topbar
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				checkDefaul:true,
				form:{
						tel:"",
						name:"",
						province:"",
						city:"",
						county:"",
						areaCode:null,
						addressDetail:"",
						postalCode: null,
					},
				rules: {
					name:[
						{
							required: true,
							message: '请输入姓名', 
						}
					],
					region:[
						{
							message: '请选择城市', 
						}
					],
					tel: [
						{ 
							required: true, 
							message: '请输入正确手机号', 
							pattern: /^1[3-9]\d{9}$/,
						}
					],
					addressDetail:[
						{
							required: true,
							message: '请填写详细地址', 
						}
					],
					postalCode:[
						{
							required: true,
							message: '请填写邮政编码', 
						}
					],
				},
				commitMall:{
					color: "#FFFFFF",
					width:"100%",
					fontSize: "30rpx",
					backgroundColor:"#0C34BA",	
				},
				
			}
		},
		computed:{
			isDefaul(){
				if(this.checkDefaul)return 1
				return 0
			}
		},
		methods:{
			updateAddress(){
				this.$refs.uForm.validate(valid => {
					if (valid && this.form.county !== "") {
						
						postNewAddress(this.form,this.isDefaul).then(res=>{
							if(res.data.code == 9000){
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								})
								setTimeout(()=>{
									uni.switchTab({
										url:"../../../home/Home"
									})
								},1000)
							}else{
								uni.showToast({
								    title: res.data.msg,
								    duration: 2000,
									icon:'none'
								})
							}
						})
					}
				});
			},
			onchange(e) {
			  const value = e.detail.value
			  this.$set(this.form,"province",value[0].text)
			  this.$set(this.form,"city",value[1].text)
			  this.$set(this.form,"county",value[2].text)
			  this.$set(this.form,"areaCode",value[2].value)
			},
		}
	}
</script>

<style scoped>
	.orderSum{
		font-size: 35rpx;
	}
	.add-new-address{
		margin: 10rpx 40rpx;
	}
	.changeRegion{
		width: 100%;
	}
	.address-default{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0rpx 40rpx 0rpx;
	}
</style>
